<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>使用canvas绘制一个简单的时钟</title>
    <style>
        .csscode{
            width: 40%; float: left; overflow: scroll}
        .jscode { width: 40%; float: left; overflow: scroll}
        .content { width: 55%;  float: right; margin-right: 20px; border: 20px solid #ccc;}
        .explain { width: 55%; float: left; padding: 40px;}
    </style>
</head>
<body>
<div class="csscode">
    <h3>css代码：</h3>
    <pre>

                .csscode{ width: 24%; float: left; overflow: scroll}
        .jscode { width: 24%; float: left; overflow: scroll}
        .content { width: 70%;  float: right; margin-right: 20px; border: 20px solid #ccc;}
        .explain { width: 70%; float: left; padding: 40px;}

    </pre>
</div>

<div class="content">

    <canvas id="canvas">
        对不起，此浏览器不支持Canvas
    </canvas>

</div>

<div class="jscode">
    <h3>js代码：</h3>
    <pre>

    var canvas = document.getElementById("canvas");
    canvas.width = 400;
    canvas.height =400;
    var ctx = canvas.getContext("2d");

    var fontHeight =15,
            margin = 35,
            handTruncation = canvas.width/25,
            hourHandTruncation = canvas.width/10,
            numeralSpacing = 20,
            radius = canvas.width/2 - margin,
            handRadius = radius + numeralSpacing;

    function drawCircle(){
        ctx.beginPath();
        ctx.arc(canvas.width/2,canvas.height/2,radius,0,Math.PI*2,true);
        ctx.stroke();
    }

    function drawNumerals(){
        var numerals = [1,2,3,4,5,6,7,8,9,10,11,12],
                angle = 0,
                numeralWidth = 0;

        numerals.forEach(function(numeral){
            angle = Math.PI/6 * (numeral -3);
            numeralWidth = ctx.measureText(numeral).width;
            ctx.fillText(numeral,
            canvas.width/2 + Math.cos(angle) * handRadius - numeralWidth/2,
                    canvas.height/2 + Math.sin(angle) * handRadius + fontHeight/3
            );
        });
    }

    function drawCenter(){
        ctx.beginPath();
        ctx.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI*2, true);
        ctx.fill();
    }

    function drawHand(loc,isHour){
        var angle = (Math.PI*2) * (loc/60) - Math.PI/ 2,
                handRadius = isHour ? radius-handTruncation-hourHandTruncation : radius - handTruncation;

        ctx.moveTo(canvas.width/2,canvas.height/2);
        ctx.lineTo(canvas.width/2 + Math.cos(angle)*handRadius,
                    canvas.height/2 + Math.sin(angle)*handRadius);
        ctx.stroke();
    }

    function drawHands(){
        var date = new Date(),
                hour = date.getHours();
        hour = hour>12 ? hour-12 :hour;

        drawHand(hour*5 + (date.getMinutes()/60)*5,true,0.5);
        drawHand(date.getMinutes(),false,0.5);
        drawHand(date.getSeconds(),false,0.2);
    }

    function drawClock() {
        ctx.clearRect(0,0,canvas.width,canvas.height);

        drawCircle();
        drawCenter();
        drawHands();
        drawNumerals();
    }

    ctx.font = fontHeight+'px,Arial';
    loop = setInterval(drawClock,1000);

    </pre>
</div>

<div class="explain">
    <h3>说明：</h3>
</div>
<script>

    var canvas = document.getElementById("canvas");
    canvas.width = 400;
    canvas.height =400;
    var ctx = canvas.getContext("2d");

    var fontHeight =15,
            margin = 35,
            handTruncation = canvas.width/25,
            hourHandTruncation = canvas.width/10,
            numeralSpacing = 20,
            radius = canvas.width/2 - margin,
            handRadius = radius + numeralSpacing;

    function drawCircle(){
        ctx.beginPath();
        ctx.arc(canvas.width/2,canvas.height/2,radius,0,Math.PI*2,true);
        ctx.stroke();
    }

    function drawNumerals(){
        var numerals = [1,2,3,4,5,6,7,8,9,10,11,12],
                angle = 0,
                numeralWidth = 0;

        numerals.forEach(function(numeral){
            angle = Math.PI/6 * (numeral -3);
            numeralWidth = ctx.measureText(numeral).width;
            ctx.fillText(numeral,
            canvas.width/2 + Math.cos(angle) * handRadius - numeralWidth/2,
                    canvas.height/2 + Math.sin(angle) * handRadius + fontHeight/3
            );
        });
    }

    function drawCenter(){
        ctx.beginPath();
        ctx.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI*2, true);
        ctx.fill();
    }

    function drawHand(loc,isHour){
        var angle = (Math.PI*2) * (loc/60) - Math.PI/ 2,
                handRadius = isHour ? radius-handTruncation-hourHandTruncation : radius - handTruncation;

        ctx.moveTo(canvas.width/2,canvas.height/2);
        ctx.lineTo(canvas.width/2 + Math.cos(angle)*handRadius,
                    canvas.height/2 + Math.sin(angle)*handRadius);
        ctx.stroke();
    }

    function drawHands(){
        var date = new Date(),
                hour = date.getHours();
        hour = hour>12 ? hour-12 :hour;

        drawHand(hour*5 + (date.getMinutes()/60)*5,true,0.5);
        drawHand(date.getMinutes(),false,0.5);
        drawHand(date.getSeconds(),false,0.2);
    }

    function drawClock() {
        ctx.clearRect(0,0,canvas.width,canvas.height);

        drawCircle();
        drawCenter();
        drawHands();
        drawNumerals();
    }

    ctx.font = fontHeight+'px,Arial';
    loop = setInterval(drawClock,1000);

</script>
</body>
</html>